<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ECharts Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"
        integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        #display-container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="display-container">
    </div>
    <script type="text/javascript">
        let chart = echarts.init(document.getElementById("display-container"));
        let option = {"dataset":[{"source":[[850,740,900,1070,930,850,950,980,980,880,1000,980,930,650,760,810,1000,1000,960,960],[960,940,960,940,880,800,850,880,900,840,830,790,810,880,880,830,800,790,760,800],[880,880,880,860,720,720,620,860,970,950,880,910,850,870,840,840,850,840,840,840],[890,810,810,820,800,770,760,740,750,760,910,920,890,860,880,720,840,850,850,780],[890,840,780,810,760,810,790,810,820,850,870,870,810,740,810,940,950,800,810,870]]},{"transform":{"type":"boxplot","config":{"itemNameFormatter":"expr {value}"}}}],"xAxis":[{"type":"category"}],"yAxis":[{"type":"value"}],"tooltip":{"trigger":"item"},"series":[{"type":"boxplot","name":"boxplot","datasetIndex":1}]}
        chart.setOption(option);
    </script>
</body>

</html>
